<template>
  <div>
    <top-nav-bar :applyPageRoute="printtitle" @back="back"></top-nav-bar>
    <a-card :bordered="false">
      <a-spin :spinning="loading">
        <a-form-model ref="form" :rules="rules" v-bind="layout" :model="form">
          <a-form-model-item label="直播名称" prop="name">
            <a-input v-model="form.name" placeholder="请输入" style="width:300px;" />
          </a-form-model-item>
          <a-form-model-item label="直播模式">
            <a-radio-group name="radioGroup" v-model="form.type">
              <a-radio
                :value="1"
                style="vertical-align:top;background:#fafafa;margin-right:15px;padding:5px 10px;border-radius:8px"
              >
                大班直播
                <a-card
                  :bordered="false"
                  style="background:#fafafa;"
                  :bodyStyle="{width:'300px',padding:0,'padding-top':'5px',}"
                >
                  <span
                    style="white-space:normal;height:40px;display:inline-block;"
                  >支持学员文字互动、回答：最多1000名学员</span>
                </a-card>
              </a-radio>
              <a-radio
                :value="2"
                style="vertical-align:top;background:#fafafa;margin-right:15px;padding:5px 10px;border-radius:8px"
              >
                大班互动
                <a-card
                  :bordered="false"
                  style="background:#fafafa;"
                  :bodyStyle="{width:'300px',padding:0,'padding-top':'5px',}"
                >
                  <span style="white-space:normal;">支持学员文字互动、回答、视频互动：最多1000名学员，最多支持与12名学员视频互动</span>
                </a-card>
              </a-radio>
              <a-radio
                :value="3"
                style="vertical-align:top;background:#fafafa;margin-right:15px;padding:5px 10px;border-radius:8px"
              >
                小班互动
                <a-card
                  :bordered="false"
                  style="background:#fafafa;"
                  :bodyStyle="{width:'300px',padding:0,'padding-top':'5px',}"
                >
                  <span style="white-space:normal;">支持学员文字互动、回答、视频互动：最多12名学员，最多支持与所有学员视频互动</span>
                </a-card>
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="上课时间" prop="end_time">
            <a-date-picker @change="changeClassDate" placeholder="请选择上课日期" />
            <a-time-picker
              :disabled="!form.class_date"
              style="margin-left:10px;"
              format="HH:mm"
              @change="changeStartTime"
            />~
            <a-time-picker
              :disabled-hours="disabledHours"
              :disabled-minutes="disabledMinutes"
              :disabled="!form.start_time"
              format="HH:mm"
              @change="changeEndTime"
            />
            <div style="color:#ccc:">老师可以在<span style="margin:0 5px;">直播时</span>主动结束直播</div>
          </a-form-model-item>
          <a-form-model-item label="封面图">
            <uploadImg @imgUrl1="coverUrl" @loading="changeLoading" @remove="removeCoverImg" />
          </a-form-model-item>
          <a-form-model-item label="上课老师" prop="teacher_id">
            <a-select v-model="form.teacher_id" placeholder="请选择" allowClear style="width:300px">
              <a-select-option
                v-for="(item,index) in teacherList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="上课学员">
            <div>
              已选择{{form.student_ids.length}}名学员
              <p>
                <a-button @click="showStudent()">选择学员</a-button>
                <span v-if="studentInfo.length==0">
                  已选择
                  <span class="primaryCOLOR">0&nbsp;</span>人
                </span>
                <span v-else class="longestText">
                  已选择
                  <span class="overFlowHidden">
                    <span v-for="(item,index) in studentInfo" :key="index">
                      {{
                      item.name}}
                      <span v-if="index!==studentInfo.length-1">，</span>
                    </span>
                  </span>
                  等&nbsp;{{studentInfo.length}}&nbsp;人
                </span>
              </p>
            </div>
          </a-form-model-item>
          <a-form-model-item label="直播简介">
            <a-textarea
              v-model="form.intro"
              placeholder="简单介绍下这次课吧(最多输入250个字)"
              :maxLength="250"
              style="width:500px;"
              :rows="4"
            />
          </a-form-model-item>
          <a-form-model-item :wrapperCol="{ span: 3,offset: 2 }">
            <a-button type="primary" @click="submit('form')">创建完成</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
      <student-model ref="studentM" @reload="studentModelReturnData" :studentArr="form.student_ids"></student-model>
    </a-card>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { teacherList } from '@/api/teacher'
import studentModel from '@/components/student'
import { createLives } from '@/api/lives'
import uploadImg from '@/components/uploadImg'
import moment from 'moment'
export default {
  components: {
    topNavBar,
    studentModel,
    uploadImg
  },
  data() {
    return {
      printtitle: '新建直播课',
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 20 },
      },
      loading: false,
      form: {
        name,
        type:1,
        class_date: undefined,
        start_time: undefined,
        end_time: undefined,
        student_ids: [],
      },
      rules: {
        name: [{ required: true, message: '请输入直播课名称！' }],
        teacher_id: [{ required: true, message: '请选择上课老师！' }],
        end_time: [{ required: true, message: '请选择上课时间！' }],
      },
      teacherList: [],
      studentInfo: [],
    }
  },
  created() {
    teacherList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
      this.teacherList = res.data
    })
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          this.loading = true
          createLives(Object.assign(params, { school_id: this.$store.state.user.school }))
            .then((res) => {
              this.$message.success('创建成功')
              this.back()
            })
            .catch((err) => {
              this.$message.error(err.data.message || '创建失败')
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    studentModelReturnData(e) {
      //学生组件返回数据
      let arr = []
      e.forEach((val) => {
        arr.push(val.id)
      })
      this.form.student_ids = arr
      this.studentInfo = e
    },
    showStudent() {
      this.$refs.studentM.showModel()
    },
    moment,
    coverUrl(e) {
      this.form.cover_image = e
    },
    changeLoading(e){
        this.loading = e
    },
    changeClassDate(date, dateS) {
      this.form.class_date = dateS
    },
    disabledHours() {
      let hour = Number(moment(this.form.start_time).format('HH'))
      let data = []
      for (let i = 0; i < hour; i++) {
        data.push(i)
      }
      return data
    },
    disabledMinutes() {
      let hour = Number(moment(this.form.start_time).format('HH'))
      let endHour = Number(moment(this.form.end_time).format('HH'))
      let minutes = Number(moment(this.form.start_time).format('mm'))
      let data = []
      if (endHour > hour) {
      } else {
        for (let i = 0; i < minutes; i++) {
          data.push(i)
        }
      }
      return data
    },
    changeStartTime(date, dateString) {
      this.form.start_time = dateString
      this.$forceUpdate()
    },
    changeEndTime(date, dateString) {
      if (moment(this.form.start_time).valueOf() > moment(date).valueOf()) {
        this.$message.warning('结束时间不能大于开始时间')
        this.form.end_time = undefined
        this.$forceUpdate()
        return
      } else {
        this.form.end_time = dateString
      }
      this.$forceUpdate()
    },
    back() {
      this.$router.go(-1)
    },
    removeCoverImg(){
        this.form.cover_image = ''
    }
  },
}
</script>

<style lang="scss" scoped>
.primaryCOLOR {
  color: #1890ff;
}
.longestText {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  .overFlowHidden {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}
</style>